<template>
  <div class="main">
    <div class="left">
      <studentMainleft></studentMainleft>
    </div>
    <div class="right">
      <div class="title" v-if="user.PositionId == 6">
        <el-col :span="2">
          <label>请输入班级：</label>
        </el-col>
        <el-col :span="6">
          <el-input v-model="input" placeholder="请输入班级编号"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="GetResultsByClassId">查询</el-button>
        </el-col>
      </div>
      <div class="upload">
        <div class="downloadexcel">
          <!--导出用户信息excel表格-->
          <download-excel
            class="export-excel-wrapper"
            :data="json_data"
            :fields="json_fields"
            name="学生成绩列表.xls"
          >
            没有模板？点击此下载
            <el-link type="primary" style="font-size: 18px">学生成绩模板</el-link>
          </download-excel>
        </div>
        <div class="uploadexcel">
          <vue-xlsx-table @on-select-file="handleSelectedFile">上传学生成绩</vue-xlsx-table>
        </div>
      </div>
      <div class="con">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="学生成绩" name="first">
            <el-table :data="Results" style="width: 100%" max-height="600px">
              <el-table-column prop="OpeningDate" label="开课日期" width="180"></el-table-column>
              <el-table-column label="授课老师" width="300" align="center">
                <template slot-scope="scope">
                  <div v-for="item in Workers" :key="item.WorkerId">
                    <span v-if="item.WorkerId==scope.row.WorkerId">{{item.WorkerName}}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="授课班级" width="300" align="center" prop="ClassId"></el-table-column>
              <el-table-column label="学生名称" width="300" align="center">
                <template slot-scope="scope">
                  <div v-for="item in Student" :key="item.Id">
                    <span v-if="item.StuId==scope.row.StuId">{{item.StuName}}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="课程" width="300" align="center">
                <template slot-scope="scope">
                  <div v-for="item in Course" :key="item.CourseId">
                    <span v-if="item.CourseId==scope.row.CourseId">{{item.CourseName}}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="成绩" prop="Score"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="上传学生成绩" name="second"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import studentMainleft from "@/components/studentMainleft";
export default {
  components: {
    studentMainleft
  },
  data() {
    return {
      body: [],
      activeName: "first",
      input: "",
      user: "",
      Results: [],
      Course: [],
      Workers: [],
      Student: [],
      classResults: [],
      json_fields: {
        StuId: "StuId",
        CourseId: "CourseId",
        WorkerId: "WorkerId",
        ClassId: "ClassId",
        Score: "Score",
        OpeningDate: "OpeningDate",
        Results_Status: "Results_Status",
        ResultsNote: "ResultsNote",
        seen: "seen"
      },
      json_data: [{
          seen:false
      }],
      json_meta: [
        [
          {
            " key ": " charset ",
            " value ": " utf- 8 "
          }
        ]
      ]
    };
  },
  created() {
    this.GetResultsByToken();
    this.GetAllCourse();
    this.GetAllWorker();
    this.GetAllStudent();
  },
  mounted() {},
  methods: {
    handleSelectedFile(data) {
        this.body = data.body
    },
    GetResultsByClassId() {
      if (this.input != "") {
        this.$axios({
          method: "get",
          url: this.$api.GetResultsByClassId,
          data: {},
          params: {
            token: this.user.Token,
            classId: this.input
          }
        }).then(res => {
          console.log(res.data.message);
          if (res.data.message != "") {
            this.Results = res.data.message;
          } else {
            this.$message({
              type: "error",
              message: "未查到该班级数据"
            });
          }
        });
      } else {
        this.GetResultsByToken();
      }
    },
    GetAllStudent() {
      this.$axios({
        method: "get",
        url: this.$api.GetAllStudent,
        data: {},
        params: {}
      }).then(res => {
        console.log(res);
        this.Student = res.data.message;
      });
    },
    GetAllWorker() {
      this.$axios({
        method: "get",
        url: this.$api.GetAllWorker,
        data: {},
        params: {}
      }).then(res => {
        console.log(res);
        this.Workers = res.data.message;
      });
    },
    GetAllCourse() {
      this.$axios({
        method: "get",
        url: this.$api.GetAllCourse,
        data: {},
        params: {}
      }).then(res => {
        this.Course = res.data.message;
      });
    },
    GetResultsByToken() {
      this.user = JSON.parse(sessionStorage.getItem("user"));
      if (this.user.PositionId == 6) {
        this.$axios({
          method: "get",
          url: this.$api.GetAllResults,
          data: {},
          params: {}
        }).then(res => {
          this.Results = res.data.message;
        });
      } else {
        this.$axios({
          method: "get",
          url: this.$api.GetResultsByToken,
          data: {},
          params: { token: this.user.Token }
        }).then(res => {
          this.Results = res.data.message;
        });
      }
    }
  }
};
</script>

<style scoped>
.main {
  display: flex;
  height: 100%;
}
.right {
  width: 100%;
  background-color: white;
  height: 80%;
  margin-left: 10px;
  padding: 0px 20px 0 20px;
}
.right .con {
  margin: 30px;
}
.right .title {
  margin: 30px;
  display: flex;
  align-items: center;
}
.right .upload {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 30px;
}
.upload .uploadexcel >>> .vue-xlsx-container .xlsx-button {
  font-size: 15px;
}
</style>
